<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddJd ref="addRef" @getDataList="getDataList" />
        <div class="strategy_head flexbox flexcenter flexbetween">
            <span class="font_16 color_01">推广位列表</span>
            <div class="flexbox flexcenter">
                <el-input placeholder="pid、用户名、商品名称" size="small" style="width:300px;margin-right:12px" clearable @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.keyword">
                </el-input>
                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="AddJd()">创建推广位</el-button>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="pid" label="Pid" width="160">
                </el-table-column>
                <el-table-column prop="goods_name" label="商品名称" min-width="300" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="goods_id" label="商品ID" width="160">
                </el-table-column>
                <el-table-column prop="mobile_url" label="网站链接" min-width="200">
                    <template slot-scope="scope" slot="header">
                        <div class="flexbox flexcenter">
                            网站链接(成交回传)
                            <el-popover width="400" trigger="hover" style="width:20px;height:20px;margin-left:5px;">
                                <img src="../../assets/img/jd_link.jpg" alt="" width="400">
                                <svg slot="reference" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="10" cy="10" r="8" fill="#CFD4DD" />
                                    <path d="M7.4 8.8544V8.9544H7.5H8.74454H8.84454V8.8544C8.84454 8.40304 8.93037 8.06505 9.09807 7.83666L9.09814 7.83671L9.10039 7.83337C9.28308 7.56236 9.58383 7.42692 10.0437 7.42692C10.3968 7.42692 10.6621 7.52052 10.8451 7.70414C11.0208 7.89135 11.1227 8.15083 11.1227 8.49176C11.1227 8.7406 11.0343 8.98223 10.8511 9.20803L10.7251 9.3559C10.3714 9.67381 10.0866 9.94944 9.87171 10.1838C9.65777 10.4171 9.50782 10.6151 9.43008 10.7769C9.26797 11.0923 9.20131 11.4719 9.20131 11.8984V12.0522V12.1522H9.30131H10.5568H10.6568V12.0522V11.8984C10.6568 11.6496 10.708 11.4341 10.8101 11.2286C10.9023 11.043 11.0356 10.8671 11.2215 10.7112L11.2215 10.7113L11.2233 10.7097C11.746 10.2493 12.0676 9.9484 12.1706 9.83314L12.1709 9.8334L12.1763 9.82623C12.4532 9.4545 12.6 8.98201 12.6 8.41484C12.6 7.72088 12.3729 7.16437 11.9116 6.75784C11.452 6.34177 10.8473 6.15 10.1201 6.15C9.29233 6.15 8.63194 6.38707 8.13991 6.8706C7.63532 7.35566 7.4 8.02186 7.4 8.8544ZM10.584 13.1633L10.5841 13.1632L10.5816 13.1609C10.3975 12.9879 10.1648 12.903 9.90175 12.903C9.63738 12.903 9.41603 12.9888 9.23284 13.1609C9.04613 13.3363 8.96114 13.5619 8.96114 13.8271C8.96114 14.0924 9.04613 14.318 9.23284 14.4934C9.41353 14.6632 9.634 14.7623 9.90175 14.7623C10.1661 14.7623 10.3875 14.6765 10.5707 14.5044C10.756 14.3303 10.8533 14.0945 10.8533 13.8271C10.8533 13.5588 10.7553 13.3357 10.584 13.1633Z" fill="white" stroke="white" stroke-width="0.2" />
                                </svg>
                            </el-popover>
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <template v-if="scope.row.mobile_url">
                            <div class="flexbox flexcenter">
                                <span class="flex oneline">{{scope.row.mobile_url}}</span>
                                <svg class="copy_btn" @click="copy(scope.row.mobile_url)" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.20001C5.55817 3.20001 5.2 3.55818 5.2 4.00001V6.20001H3.5C3.05817 6.20001 2.7 6.55818 2.7 7.00001V17C2.7 17.4418 3.05817 17.8 3.5 17.8H13.5C13.9418 17.8 14.3 17.4418 14.3 17V15.3H16.5C16.9418 15.3 17.3 14.9418 17.3 14.5V4.00001C17.3 3.55818 16.9418 3.20001 16.5 3.20001H6ZM14.3 13.7H15.7V4.80001H6.8V6.20001H13.5C13.9418 6.20001 14.3 6.55818 14.3 7.00001V13.7ZM6 7.80001H4.3V16.2H12.7V14.5V7.80001H6Z" fill="#616C85" />
                                    <rect x="5.5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                    <path d="M5.5 13.2C5.5 13.0895 5.58954 13 5.7 13L9.3 13C9.41046 13 9.5 13.0895 9.5 13.2V14.4C9.5 14.5105 9.41046 14.6 9.3 14.6H5.7C5.58954 14.6 5.5 14.5105 5.5 14.4V13.2Z" fill="#616C85" />
                                </svg>
                            </div>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="jdopen_url" label="app链接(成交回传)" min-width="200">
                    <template slot-scope="scope">
                        <template v-if="scope.row.jdopen_url">
                            <div class="flexbox flexcenter">
                                <span class="flex oneline">{{scope.row.jdopen_url}}</span>
                                <svg class="copy_btn" @click="copy(scope.row.jdopen_url)" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.20001C5.55817 3.20001 5.2 3.55818 5.2 4.00001V6.20001H3.5C3.05817 6.20001 2.7 6.55818 2.7 7.00001V17C2.7 17.4418 3.05817 17.8 3.5 17.8H13.5C13.9418 17.8 14.3 17.4418 14.3 17V15.3H16.5C16.9418 15.3 17.3 14.9418 17.3 14.5V4.00001C17.3 3.55818 16.9418 3.20001 16.5 3.20001H6ZM14.3 13.7H15.7V4.80001H6.8V6.20001H13.5C13.9418 6.20001 14.3 6.55818 14.3 7.00001V13.7ZM6 7.80001H4.3V16.2H12.7V14.5V7.80001H6Z" fill="#616C85" />
                                    <rect x="5.5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                    <path d="M5.5 13.2C5.5 13.0895 5.58954 13 5.7 13L9.3 13C9.41046 13 9.5 13.0895 9.5 13.2V14.4C9.5 14.5105 9.41046 14.6 9.3 14.6H5.7C5.58954 14.6 5.5 14.5105 5.5 14.4V13.2Z" fill="#616C85" />
                                </svg>
                            </div>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="source_url" label="网站链接(下单回传)" min-width="200">
                    <template slot-scope="scope">
                        <template v-if="scope.row.source_url">
                            <div class="flexbox flexcenter">
                                <span class="flex oneline">{{scope.row.source_url}}</span>
                                <svg class="copy_btn" @click="copy(scope.row.source_url)" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.20001C5.55817 3.20001 5.2 3.55818 5.2 4.00001V6.20001H3.5C3.05817 6.20001 2.7 6.55818 2.7 7.00001V17C2.7 17.4418 3.05817 17.8 3.5 17.8H13.5C13.9418 17.8 14.3 17.4418 14.3 17V15.3H16.5C16.9418 15.3 17.3 14.9418 17.3 14.5V4.00001C17.3 3.55818 16.9418 3.20001 16.5 3.20001H6ZM14.3 13.7H15.7V4.80001H6.8V6.20001H13.5C13.9418 6.20001 14.3 6.55818 14.3 7.00001V13.7ZM6 7.80001H4.3V16.2H12.7V14.5V7.80001H6Z" fill="#616C85" />
                                    <rect x="5.5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                    <path d="M5.5 13.2C5.5 13.0895 5.58954 13 5.7 13L9.3 13C9.41046 13 9.5 13.0895 9.5 13.2V14.4C9.5 14.5105 9.41046 14.6 9.3 14.6H5.7C5.58954 14.6 5.5 14.5105 5.5 14.4V13.2Z" fill="#616C85" />
                                </svg>
                            </div>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="order_url" label="app链接(下单回传)" min-width="200">
                    <template slot-scope="scope">
                        <template v-if="scope.row.order_url">
                            <div class="flexbox flexcenter">
                                <span class="flex oneline">{{scope.row.order_url}}</span>
                                <svg class="copy_btn" @click="copy(scope.row.order_url)" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.20001C5.55817 3.20001 5.2 3.55818 5.2 4.00001V6.20001H3.5C3.05817 6.20001 2.7 6.55818 2.7 7.00001V17C2.7 17.4418 3.05817 17.8 3.5 17.8H13.5C13.9418 17.8 14.3 17.4418 14.3 17V15.3H16.5C16.9418 15.3 17.3 14.9418 17.3 14.5V4.00001C17.3 3.55818 16.9418 3.20001 16.5 3.20001H6ZM14.3 13.7H15.7V4.80001H6.8V6.20001H13.5C13.9418 6.20001 14.3 6.55818 14.3 7.00001V13.7ZM6 7.80001H4.3V16.2H12.7V14.5V7.80001H6Z" fill="#616C85" />
                                    <rect x="5.5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                    <path d="M5.5 13.2C5.5 13.0895 5.58954 13 5.7 13L9.3 13C9.41046 13 9.5 13.0895 9.5 13.2V14.4C9.5 14.5105 9.41046 14.6 9.3 14.6H5.7C5.58954 14.6 5.5 14.5105 5.5 14.4V13.2Z" fill="#616C85" />
                                </svg>
                            </div>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="160">
                </el-table-column>
                <el-table-column prop="caeate_date" label="时间" width="170">
                </el-table-column>
                <el-table-column prop="" label="操作" width="140" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="allCopy(scope.row)">一键复制链接</el-link>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="segmentation_cost" label="操作" width="170">
                    <template slot-scope="scope">
                        <p>
                            <el-button type="text" style="padding:5px 0" @click="addTuiguang(scope.row.pid)">推广位备案</el-button>
                        </p>
                        <p>
                            <el-button type="text" style="padding:5px 0" @click="addGoods(scope.row.pid)">生成商品goodsSign</el-button>
                        </p>
                        <p>
                            <el-button type="text" style="padding:5px 0" @click="addLink(scope.row.pid)">生成推广链接</el-button>
                        </p>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import AddJd from "./AddJd";
export default {
    name: "",
    data() {
        return {
            loading: false,
            queryInfo: {
                page: 1,
                limit: 20,
                keyword: "",
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "cid/Jd/jdList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        AddJd() {
            this.$refs.addRef.dialogVisible = true;
            this.$refs.addRef.getUserList();
        },

        // 复制
        copy(text) {
            let url = text;
            let oInput = document.createElement("input");
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: "复制成功",
                type: "success",
            });
            oInput.remove();
        },

        // 一键复制
        allCopy(row){
            let text = '网站链接(成交回传):'+row.mobile_url+"\n"+'app链接(成交回传):'+row.jdopen_url+'\n'+'网站链接(下单回传):'+row.source_url+'\n'+'app链接(下单回传):'+row.order_url
            const textarea = document.createElement('textarea');
            textarea.value = text
            document.body.appendChild(textarea); 
            textarea.select(); 
            document.execCommand('Copy');
            document.body.removeChild(textarea);
            this.$message({
                message: "复制成功",
                type: "success",
            });
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        AddJd,
    },
};
</script>


<style scoped>
.strategy_head {
    height: auto;
    margin-top: 20px;
}
.oneline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.copy_btn {
    cursor: pointer;
    flex-shrink: 0;
}
</style>


